<template>
  <el-form inline>
    <el-form-item label="一级分类">
      <!--下拉菜单中选中的那个菜单的id会被自动的存储到v-model指令所需的表达式中category1Id-->
      <el-select v-model="category1Id" placeholder="请选择" @change="changeCategory1Id" :disabled="isDisabled">
        <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in category1List" :key="c1.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="category2Id" placeholder="请选择" @change="changeCategory2Id" :disabled="isDisabled">
        <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in category2List" :key="c2.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="category3Id" placeholder="请选择" @change="changeCategory3Id" :disabled="isDisabled">
        <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in category3List" :key="c3.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: 'CategorySelector',
  data() {
    return {
      category1Id: '', // 一级分类的id
      category2Id: '', // 二级分类的id
      category3Id: '', // 二级分类的id
      category1List: [], // 一级分类列表数据
      category2List: [], // 二级分类列表数据
      category3List: [], // 三级分类列表数据
      isDisabled: false // 选择器组件是否禁用的标识
    }
  },
  // 页面加载完毕的生命周期的钩子
  mounted() {
    // 获取一级分类
    this.getCategory1List()
  },
  methods: {
    // 获取一级分类菜单列表数据
    async getCategory1List() {
      const result = await this.$API.category.getCategoryList1()
      if (result.code === 200) {
        // 更新数据
        this.category1List = result.data
      }
    },
    // 获取二级分类菜单列表数据
    async changeCategory1Id(categoryId) {
      // 置空二级分类/三级分类的id及列表数据
      this.category2Id = ''
      this.category3Id = ''
      this.category2List = []
      this.category3List = []
      // 分发自定义事件,告诉父级组件,当前的级别的标识和此时的分类的id
      this.$emit('changeCategoryId', { level: 1, categoryId })
      const result = await this.$API.category.getCategoryList2(categoryId)
      if (result.code === 200) {
        this.category2List = result.data
      }
    },
    // 改变二级分类的选项的时候, 获取三级分类菜单列表数据
    async changeCategory2Id(categoryId) {
      // 置空三级分类的id和三级分类的列表数据
      this.category3Id = ''
      this.category3List = []
      // 分发自定义事件,告诉父级组件,当前的级别的标识和此时的分类的id
      this.$emit('changeCategoryId', { level: 2, categoryId })
      const result = await this.$API.category.getCategoryList3(categoryId)
      if (result.code === 200) {
        this.category3List = result.data
      }
    },
    // 改变三级分类的选项的时候
    async changeCategory3Id(categoryId) {
      // 分发自定义事件,告诉父级组件,当前的级别的标识和此时的分类的id
      this.$emit('changeCategoryId', { level: 3, categoryId })
    }
  }
}
</script>
